<template>
  <!-- 新增护理项目对话框
         confirm：点击确定按钮的回调函数
         confirmOnEnter：点击回车按钮提交
      -->
      <t-dialog
        header="编辑护理项目"
        :visible.sync="editFormVisiable"
        width="40%"
        :confirmOnEnter="true"
        @close="closeEditDialog"
        @confirm="saveProject"
      >
        <t-space direction="vertical" style="width: 100%">
          <!-- rule:绑定表单每一项的校验规则 -->
          <t-form
            :data="data"
            labelWidth="calc(8em + 24px)"
            layout="inline"
            :rules="addFormRule"
            ref="nusrong_project_form"
            @reset="onReset"
            @submit="saveProjectToDB"
          >
            <t-form-item label="护理项目名称" name="name">
              <t-input v-model="data.name" placeholder="请输入护理项目名称"></t-input>
            </t-form-item>
            <t-form-item label="价格" name="price">
              <t-input v-model="data.price" type="number" placeholder="请输入护理项目价格"></t-input>
            </t-form-item>
            <t-form-item label="护理项目单位" name="unit">
              <t-input v-model="data.unit" placeholder="请输入护理项目名称"></t-input>
            </t-form-item>
            <t-form-item label="排序" name="orderNo">
              <t-input v-model="data.orderNo" type="number" placeholder="请输入护理项目排序"></t-input>
            </t-form-item>
            <t-form-item label="状态" name="status">
              <t-radio-group v-model="data.status">
                  <t-radio
                      v-for="(item, index) in statusOptions"
                      :key="index"
                      :value="item.value"
                      >{{ item.label }}</t-radio
                    >
              </t-radio-group>
            </t-form-item>
            <t-form-item label="护理图片" name="images">
              <t-upload
                ref="uploadRef1"
                action="http://localhost/api/upload/single"
                v-model="file"
                :autoUpload="autoUpload"
                :showImageFileName="showImageFileName"
                :sizeLimit="sizeLimit"
                theme="image"
                tips="请选择单张图片文件上传（上传成功状态演示）"
                accept="image/*"
                :onSuccess="onSuccess"
                :onRemove="onRemove"
              >
              </t-upload>
            </t-form-item>
            <t-form-item label="护理项目描述" name="nursingRequirement">
              <t-textarea v-model="data.nursingRequirement" placeholder="项目描述"></t-textarea>
            </t-form-item>
          </t-form>

        </t-space>
      </t-dialog>
</template>

<script setup lang="ts">
  import { ref,watch} from 'vue'
  import { MessagePlugin } from 'tdesign-vue-next';
  import { updateById } from '@/api/nursing_project_api';
  // 添加护理项目对话框显示和隐藏
  const props = defineProps(['editFormVisiable','data'])
  const emit = defineEmits(['close','refresh'])

  function closeEditDialog() {
    emit('close')
    emit('refresh')
  }

  // 启用禁用下拉框
  const statusOptions = ref([
    {label: "启用",value:1},
    {label: "禁用",value:0}
  ])

  const autoUpload = true
  const showImageFileName = true
  const sizeLimit = 1024*10
  const file = ref([])   // [{ name: 'demo-image-1.png', url: 'https://tdesign.gtimg.com/demo/demo-image-1.png' }]

  watch(()=>props.data,(newVal)=>{
    file.value = []
    file.value.push({
        url: newVal.image
    })
  })

   const nusrong_project_form = ref(null);

  function onSuccess(context) {
    props.data.image = context.response.data.msg
  }

  function onRemove() {
    props.data.image =""
  }


  // 表单校验规则
  const addFormRule =ref({
    name: [
      {
        required: true,
        message: "护理项目名是必填项",
        type: 'error',
        trigger: 'blur'
      },
      {
        min: 2,
        message: '至少需要两个字符，一个中文等于两个字符',
        type: 'warning',
        trigger: 'blur',
      }
    ],
     price: [
        {
            required: true,
            message: "价格是必填项",
        }
      ],
      unit: [
          {
            required: true,
            message: "单位是必填项",
        }
      ],
      orderNo: [
          {
            required: true,
            message: "排序是必填项",
        }
      ],
        status: [
          {
            required: true,
            message: "状态是必填项",
        }
      ],
        image: [
          {
            required: true,
            message: "图片是必填项",
        }
      ],
        nursingRequirement: [
          {
            required: true,
            message: "护理描述是必填项",
        }
      ],

  })


  // 点击添加表单的确定按钮
  const saveProject = ()=>{
      // 手动提交添加表单
      // 1、通过ref属性找到表单，手动提交
      nusrong_project_form.value.submit()
  }
  // 保存护理项目
  const saveProjectToDB = async ({ validateResult, firstError }) => {

    if (validateResult === true) {
      MessagePlugin.success('修改成功');
      await updateById(props.data)
      // props.data = {
      //     name: '',
      //     price: '',
      //     unit: '',
      //     orderNo: '',
      //     status: 1,
      //     image: '',
      //     nursingRequirement: ''
      //   }
      closeEditDialog()
    } else {
      console.log('Errors: ', validateResult);
      MessagePlugin.warning(firstError);
    }
  };
 
</script>
